<!--
 * @Description: 发货单
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-07-14 19:22:46
 * @FilePath: /yuxiuproweb/src/views/mes/pro/invoice/index.vue
-->
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未发货" name="0"></el-tab-pane>
      <el-tab-pane label="已发货" name="1"></el-tab-pane>
      <el-tab-pane label="部分发货" name="2"></el-tab-pane>
    </el-tabs>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="订单编号" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户名" prop="clintName">
        <el-input
          v-model="queryParams.clintName"
          placeholder="请输入客户名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发货单号" prop="trackingNumber">
        <el-input
          v-model="queryParams.trackingNumber"
          placeholder="请输入发货单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="发货时间" prop="deliveryTime">
        <el-date-picker
          clearable
          v-model="queryParams.deliveryTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择发货时间"
          style="width: 100%"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="发货时间" prop="deliveryTime">
        <el-date-picker
          align="center"
          style="width: 240px"
          v-model="queryParams.deliveryTimeObj"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="activeName !== '1'">
        <el-button
          type="primary"
          plain
          icon="el-icon-document-checked"
          size="mini"
          @click="handleBatchInvoice"
          >去发货</el-button
        >
      </el-col>
      <!--<el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['md:order:remove']"
          >删除</el-button
        >
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['md:order:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="orderList"
      @selection-change="handleSelectionChange"
      :max-height="maxHeight - 50"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <DetailView
            :data="props.row"
            :sendList="sendList"
            :activeName="activeName"
            @on-change="handleDetailChange"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="activeName !== '1'"
        type="selection"
        width="55"
        align="center"
      />
      <!-- <el-table-column
        type="selection"
        width="55"
        :selectable="selectable"
        align="center"
      /> -->
      <el-table-column
        label="订单编号"
        align="center"
        prop="proOrderId"
        width="100"
      >
      </el-table-column>
      <el-table-column
        label="发货单号"
        align="center"
        prop="trackingNumber"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="客户名称"
        align="center"
        prop="clientName"
        min-width="160"
      />
      <el-table-column
        label="品牌"
        align="center"
        prop="brandName"
        min-width="140"
      />
      <el-table-column
        label="下单时间"
        align="center"
        prop="createDate"
        width="130"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="交单时间"
        align="center"
        prop="submitTime"
        width="130"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.submitTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发货时间"
        align="center"
        prop="createTime"
        width="130"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="地址"
        align="center"
        prop="address"
        min-width="250"
      />
      <el-table-column label="状态" align="center" prop="state">
        <template slot-scope="{ row }">
          {{ getTypeName(dict.type.pro_order_state, row.state) }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="商品价格" align="center" prop="commodityPrice" />
      <el-table-column label="邮费" align="center" prop="postage" />
      <el-table-column label="变更费" align="center" prop="changeFee" />
      <el-table-column
        label="总价调整"
        align="center"
        prop="totalPriceAdjustment"
      /> -->
      <!-- <el-table-column label="总价" align="center" prop="totalPrice" /> -->
      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column label="制单人" align="center" prop="preparedByName" />
      <!-- <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        min-width="70"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-sell"
            :disabled="`${scope.row.state}` === '4'"
            @click="handleInvoice(scope.row)"
            >发货</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 去发货 -->
    <send-view
      v-if="send.show"
      :show.sync="send.show"
      v-bind="send"
      @update="getList()"
    ></send-view>
  </div>
</template>

<script>
import { goodsList } from "@/api/asc/invoice";
import SendView from "./mods/send";
import DetailView from "./mods/detail.vue";
import commonMix from "@/utils/mixins/common";

export default {
  name: "Invoice",
  dicts: ["pro_order_state"],
  mixins: [commonMix],
  components: {
    SendView,
    DetailView,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      clientList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        deliveryTime: null,
        trackingNumber: "",
        clintName: "",
        orderId: "",
        state: "0",
        deliveryTimeObj: null,
      },
      selection: [],
      send: {
        show: false,
        type: "single",
        data: null,
      },
      sendList: [],
      activeName: "0",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleClick() {
      this.queryParams.state = this.activeName;
      this.getList();
    },

    selectable(row) {
      return `${row.state}` !== "4";
    },
    /** 查询订单列表 */
    getList() {
      this.loading = true;
      this.sendList = [];

      const params = {
        ...this.queryParams,
        deliveryTimeStart: this.queryParams.deliveryTimeObj?.[0] || null,
        deliveryTimeEnd: this.queryParams.deliveryTimeObj?.[1] || null,
      };
      delete params.deliveryTimeObj;

      goodsList(params).then((response) => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 发货
    handleInvoice(row) {
      this.send = {
        show: true,
        type: "single",
        data: {
          orderIds: row.proOrderId,
        },
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.deliveryTimeObj = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    // 批量发货
    handleBatchInvoice() {
      if (!this.sendList?.length && !this.selection?.length) {
        this.$message.error("请选择需要发货的订单");
        return;
      }
      this.send = {
        show: true,
        type: "batch",
        data: this.sendList,
        selection: this.selection,
      };
    },

    // 匹配
    handleDetailChange(row) {
      const index = this.sendList?.findIndex(
        (e) => e.orderId === row.orderId && e.productId === row.productId
      );
      if (index > -1) {
        this.sendList.splice(index, 1);
      } else {
        this.sendList.push(row);
      }
    },

    /** 导出按钮操作 */
    handleExport() {
      const { pageNum, pageSize, deliveryTimeObj, ...attrs } = this.queryParams;
      const params = {
        ...attrs,
        deliveryTimeStart: deliveryTimeObj?.[0] || null,
        deliveryTimeEnd: deliveryTimeObj?.[1] || null,
      };
      this.download(
        "pro/goods/export",
        {
          ...params,
        },
        `goods_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
</style>
